<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{display:none;}
    </style>
</head>
<body>
<div id="div2">
    <input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
</div>
<div class="box" style="display:block;">11</div>
<div class="box">22</div>
<div class="box">33</div>
</body>
<script type="text/javascript">
    window.onload = function () {
        var oTab = new TabSwitch("div2");
    }
    var a = null;
    var aDiv = null;
    function TabSwitch(id){
        var div2 = document.getElementById(id);
        //全局变量 转变成属性
        this.a = div2.getElementsByTagName('input');
        this.aDiv = document.getElementsByClassName('box');
        //将这里的对象this存入_this中，方便在按钮点击里面用
        var _this =this;
        for(i=0;i<this.a.length;i++){
            this.a[i].index = i;
            this.a[i].onclick = function () {
            	//这里的this指的是按钮，把它作为参数传到函数中；
                _this.tab(this);
            }
        }
    }
    //函数 转变成对象的方法
    TabSwitch.prototype.tab = function (a){
        for(i=0;i<this.a.length;i++){
            this.a[i].className = '';
            this.aDiv[i].style.display = 'none';
        }
        a.className = 'active';
        this.aDiv[a.index].style.display = 'block';
    }
</script>
</html>
